import { createRoot } from 'react-dom/client'

const arr = [
  { id: 1, name: 'Vue' },
  { id: 2, name: 'React' },
  { id: 3, name: 'Angular' },
]

/* const con = (
  <ul>
    <li>{arr[0].name}</li>
    <li>{arr[1].name}</li>
    <li>{arr[2].name}</li>
  </ul>
) */

/* const jsx = [<li>{arr[0].name}</li>, <li>{arr[1].name}</li>, <li>{arr[2].name}</li>]
const con = <ul>{jsx}</ul> */

/* const jsx = arr.map((item) => <li key={item.id}>{item.name}</li>)
const con = <ul>{jsx}</ul> */

const con = (
  <ul>
    {arr.map((item) => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
)

// createRoot(渲染到哪儿).render(渲染谁)
createRoot(document.querySelector('#root')).render(con)
